<template>
  <el-card class="role-card">
    <div class="home-box">
      <el-form :inline="true" :model="searchForm" v-show="showSearch">
        <el-form-item label="文件编号">
          <el-input
            v-model="searchForm.id"
            placeholder="文件名编号"
            clearable
          />
        </el-form-item>

        <el-form-item label="文件名">
          <el-input
            v-model="searchForm.fileName"
            placeholder="文件名"
            clearable
          />
        </el-form-item>

        <el-form-item v-auth="'查询文件'">
          <el-button
            type="primary"
            @click="getListA"
            style="margin-left: -16px"
          >
            查询
          </el-button>
        </el-form-item>

        <el-form-item v-auth="'重置查询文件'">
          <el-button @click="resetGetListA" type="primary"> 重置 </el-button>
        </el-form-item>
      </el-form>

      <right-toolbar
        v-model:showSearch="showSearch"
        @queryTable="getListA"
        @onImportClick="handleImport"
        @onOutClick="onDownTemplate"
        @onAddClick="onDownTemplate"
      >
        <template #left-btn>
          <el-row :gutter="10">
            <el-col :span="1.5" v-auth="'上传文件'">
              <el-button
                type="primary"
                plain
                icon="Upload"
                @click="handleImport"
              >
                上传
              </el-button>
            </el-col>

            <el-col :span="1.5" v-auth="'删除文件'">
              <deleteUser :selection="selection" />
            </el-col>
          </el-row>
        </template>
      </right-toolbar>

      <pdf :src="pdfUrl" :page="1"></pdf>

      <el-table
        :data="tableData"
        v-loading="loading"
        ref="tableRef"
        element-loading-text="加载中..."
        :row-key="(row) => row.id"
        border
        @selection-change="selectChange"
      >
        <el-table-column type="selection" align="center" />

        <el-table-column prop="id" label="编号" width="250" align="center" />

        <el-table-column prop="fileName" label="文件名" align="center" />

        <el-table-column
          prop="uploadTime"
          label="上传时间"
          width="200"
          align="center"
        />

        <el-table-column
          label="操作"
          width="280"
          align="center"
          v-auth="'预览下载文件'"
        >
          <template #default="{ row }">
            <el-button type="success" size="small" @click="preview(row.id)">
              预 览
            </el-button>

            <el-button type="primary" size="small" @click="download(row.id)">
              下 载
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!--分页组件-->
      <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="searchForm.pageNum"
        v-model:limit="searchForm.pageSize"
        :pageSizes="[10, 20, 30, 40]"
        @pagination="getListA"
      />

      <!-- 用户导入对话框 -->
      <UploadExcel
        v-model="upload.open"
        :title="upload.upLoadTitle"
        :url="importUrl"
        fileType=".pdf"
        @onSuccess="onSuccess"
        @onDownTemplate="onDownTemplate"
      ></UploadExcel>
    </div>
  </el-card>
</template>
<script>
export default {
  name: "adminList",
};
</script>
<script setup>
import { ref, onMounted } from "vue";
import { ElMessage } from "element-plus";
import { getList, preview, download } from "@/service/api/pdf";
import eventBus from "@/utils/event-bus";
import deleteUser from "./components/delete.vue";
import UploadExcel from "@/components/UploadExcel/index.vue";

const showSearch = ref(true);
const tableRef = ref();
const tableData = ref([]);
const total = ref(0);
const loading = ref(false);
const selection = ref([]);
const importUrl = ref("/pdf/upload");

const searchForm = ref({
  id: null,
  fileName: null,
  pageNum: 1,
  pageSize: 10,
});

/**
 * 获取列表
 */
const getListA = async () => {
  const { count, rows } = await getList(searchForm.value);
  total.value = count;
  tableData.value = rows;
};

/**
 * 获取账号列表--重置查询条件
 */
const resetGetListA = async () => {
  searchForm.value = {
    id: null,
    pdfName: null,
    pageNum: 1,
    pageSize: 10,
  };
  getListA();
};

/**
 * 勾选表格CheckBox的回调函数-获取勾选的数组
 */
const selectChange = (select) => {
  selection.value = select;
};

/*** 用户导入参数 */
const upload = ref({
  // 是否显示弹出层（用户导入）
  open: false,
  // 弹出层标题（用户导入）
  upLoadTitle: "文件上传",
});

/** 导入按钮操作 */
function handleImport() {
  upload.value.open = true;
}

/** 文件上传成功处理 */
const onSuccess = (res) => {
  ElMessage.success("上传文件成功");
  getListA();
  upload.value.open = false;
};

const onDownTemplate = () => {
  ElMessage.error("当前无模板");
};

eventBus.on("getPdfList", () => {
  getListA();
});

onMounted(async () => {
  getListA();
});
</script>

<style lang="scss" scoped>
.home-box {
  .header {
    margin-bottom: 22px;
    text-align: right;
  }

  ::v-deep .el-tag {
    margin-right: 6px;
  }

  ::v-deep .avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
  }
  .el-timeline-item {
    padding-bottom: 1px;
  }
  .cell {
    display: inline-block;
  }
}
.el-card {
  border-radius: 10px;
}
</style>
